<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form prependId="false">

            <p:dataTable var="car" value="#{tableBean.cars}" paginator="true" rows="10"
                         selection="#{tableBean.selectedCar}">

                <f:facet name="header">
                    RadioButton Based Selection
                </f:facet>

                <p:column selectionMode="single" />

                <p:column headerText="Model">
                    <h:outputText value="#{car.model}" />
                </p:column>

                <p:column headerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>

                <p:column headerText="Manufacturer">
                    <h:outputText value="#{car.manufacturer}" />
                </p:column>

                <p:column headerText="Color">
                    <h:outputText value="#{car.color}" />
                </p:column>

                <f:facet name="footer">
                    <p:commandButton value="View" image="ui-icon ui-icon-search"
                                     update="displaySingle" oncomplete="singleCarDialog.show()"/>
                </f:facet>
            </p:dataTable>

            <p:dataTable var="car" value="#{tableBean.cars}" paginator="true" rows="10"
                         selection="#{tableBean.selectedCars}">

                <f:facet name="header">
                    Checkbox Based Selection
                </f:facet>

                <p:column selectionMode="multiple" />

                <p:column headerText="Model">
                    <h:outputText value="#{car.model}" />
                </p:column>

                <p:column headerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>

                <p:column headerText="Manufacturer">
                    <h:outputText value="#{car.manufacturer}" />
                </p:column>

                <p:column headerText="Color">
                    <h:outputText value="#{car.color}" />
                </p:column>

                <f:facet name="footer">
                    <p:commandButton value="View" image="ui-icon ui-icon-search"
                                     update="displayMulti" oncomplete="multiCarDialog.show()"/>
                </f:facet>
            </p:dataTable>

            <p:dialog header="Car Detail" widgetVar="singleCarDialog" resizable="false"
                      width="250" showEffect="explode" hideEffect="explode">

                <h:panelGrid id="displaySingle" columns="2" cellpadding="4">

                    <f:facet name="header">
                        <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
                    </f:facet>

                    <h:outputText value="Model:" />
                    <h:outputText value="#{tableBean.selectedCar.model}" />

                    <h:outputText value="Year:" />
                    <h:outputText value="#{tableBean.selectedCar.year}" />

                    <h:outputText value="Manufacturer:" />
                    <h:outputText value="#{tableBean.selectedCar.manufacturer}" />

                    <h:outputText value="Color:" />
                    <h:outputText value="#{tableBean.selectedCar.color}" />
                </h:panelGrid>
            </p:dialog>

            <p:dialog header="Car Detail" widgetVar="multiCarDialog"
                      width="250" height="300" showEffect="explode" hideEffect="explode">

                <p:dataList id="displayMulti"
                            value="#{tableBean.selectedCars}" var="selectedCar">
                    Model: #{selectedCar.model}, Year: #{selectedCar.year}
                </p:dataList>

            </p:dialog>

        </h:form>

    </h:body>
</html>

